<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
	<title><%=ProConfig.PROJECT_NAME %></title>
	<%@ include file="/WEB-INF/wechat/iot/common/resource_lib.jsp"%>
	<style type="text/css">
		.body-container{
			background: #fff ;
			padding-top: 20px;
/* 			padding: 0px 5px 0 5px; */
		}
		.weui-cells{
			margin-top: 0;
			font-size: 15px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="t-c title-info">
			<span id="titlename">Item addition</span>
			<div class="back" onclick="forward('/wiot/mscene')" style=" position: fixed;top: 0px;" >Back</div>
		</div>
		<div style="height: 50px;"></div>
		
		<div class="body-container">
			<div id="form_submit" class="weui-cells weui-cells_form jui-form_submit" data-options="url:'/scene',
												  submit:'#saveBtn',
												  success:'sunccessReturn'">
				<div id="form_submit_update"  config-option=" url:'/scene','method':'put',
																			   submit:'#saveBtn',
																			   success:'sunccessReturn' " >
				<div id="detail_get" config-option=" url:'/scene?id=$#init-id$' , success:'initSuccess' ">
				<input type="hidden" id="init-id" type-name="id" >
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label class="weui-label">name：</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" validate="empty:The name input cannot be empty" type-name="name" placeholder="Please enter a project name">
					</div>
				</div>
				
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label class="weui-label">picture：</label>
					</div>
					<div class="weui-cell__bd">
						<img id="scenephoto" src=""  class="hide" style="height:78px; border-radius: 3px;"> 
						<div class="weui-uploader__input-box" style="margin-bottom: 0;">
           					 <input id="uploaderInput" onchange="btnUploadFile(event)" class="weui-uploader__input" type="file" accept="image/*" multiple="">
						</div>
						<input type="hidden"  id="scenephotoid" type-name="img_id">
					</div>
				</div>
				
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label class="weui-label">Description：</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type-name="description" placeholder="Project description,optional">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label class="weui-label">remark：</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" type-name="remark" placeholder="Please enter remarks，optional">
					</div>
				</div>

				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label for="date" class="weui-label">sort</label>
					</div>
					<div class="weui-cell__bd">
						<input class="weui-input" id="seq" type="text" placeholder="Please select sort" validate="empty" type-name="seq" readonly="true">
					</div>
				</div>

			</div></div>
			</div>
			<div class="width80 m-auto" style="padding: 30px 0;">
				<a class="weui-btn" style="background: #3499da;" href="javascript:" id="saveBtn">save</a>			
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	
	$(function(){
		
		if(GetQueryString("id") !=null ){
			$("#detail_get").addClass("jui-detail_get");
			$("#form_submit_update").addClass("jui-form_submit");
			$("#form_submit").removeClass("jui-form_submit");
			$("#init-id").val( GetQueryString("id"));
			$("#titlename").html("Project editor");
		}else{
			$("#scenephoto").show();
			$("#scenephoto").attr("src","<%=basePath%>/image/wechat/iot/tinmg.png");
		}
		
	})

	function btnUploadFile(e,type){
	    //获取图片
	    var files = e.target.files;
	    var file = files[0];
	    if (!/\/(?:jpeg|jpg|png)/i.test(file.type)){
	        return;
	    }
	    var reader = new FileReader();
	    reader.onload = function() { 
	        var result = this.result;  //图片base64字符串
	        if(result.length > 6 * 1024 * 1024){
	        	tip('Picture too large，Please re-select',e);
	        	return ;
	        }
	        if( result.length <= 300 * 1024 ){
	        	// 上传图片
	            postAjax( localUrl + "/base64/fileInfo.json", {base64File: result },function(data){
	            	if(isOK(data)){
	            		 $("#scenephoto").attr("src",result);  	//预览图片
	            		 $("#scenephotoid").val(data.data.file_path+"/"+data.data.id+"."+data.data.fix);
	    	        	 $("#scenephoto").show();
	            	}
	            });
	        	 
	        }else{
	        	var img = new Image();
	        	img.src = result;
	        	img.onload = function() {
	                var compressedDataUrl = compress(img, file.type);
	                // 上传图片
	                postAjax( localUrl + "/base64/fileInfo.json", {base64File: compressedDataUrl },function(data){
	                	if(isOK(data)){
	                		$("#scenephoto").attr("src",compressedDataUrl);  	//预览图片
	                		$("#scenephotoid").val(data.data.file_path+"/"+data.data.id+"."+data.data.fix);
	     	                $("#scenephoto").show();
	                	}
	                });
	            };
	        }
	    };
	    reader.readAsDataURL(file);    //Base64
	}

	function initSuccess(data){
		if(isOK(data)){
			console.log(data.data.img_id != null,data.data.img_id);
			if(! validater.empty( data.data.img_id)){
				$("#scenephoto").show();
				$("#scenephoto").attr("src",imgUrl+data.data.img_id);  	//预览图片
	       		$("#scenephotoid").val(data.data.img_id);
			}else{
				$("#scenephoto").show();
				$("#scenephoto").attr("src","<%=basePath%>/image/wechat/iot/tinmg.png");  	//预览图片
			}
		}
	}
	
	function sunccessReturn(data){
		if(isOK(data)){
			tip("Successful");
			setTimeout(function() {
				forward('/wiot/mscene');
			}, 300);
		}
	}

	$("#seq").picker({
	  title: "Please select an order",
	  cols: [
	    {
	      textAlign: 'center',
	      values: [1,2,3,4,5,6,7,8,9,10],
	      displayValues: ["1 [foremost]","2 [Second first]","3 [Nearer the front]",4,5,6,7,8,"9 [Relatively backward]","10 [Farthest back]" ]
	    }
	  ]
	});
	
</script>
</html>